<template>
    <div>
        <h3 class="header">{{details.title}}</h3>
        <div class="articleInfo">
            <el-tag size="small">作者</el-tag>
            <span v-if="details.userBean != null">{{details.userBean.nickname}}</span>
            <span v-else>{{details.author.nickname}}</span>
            <el-tag size="small">从属栏目</el-tag> {{details.category.cname}}
            <el-tag size="small">发布时间</el-tag> {{details.publishTime}}
            <el-tag size="small">编辑时间</el-tag> {{details.updateTime}}
            <el-tag size="small">文章状态</el-tag>
            <span v-if="details.status == 1">已发布</span>
            <span v-if="details.status == 2">草稿箱</span>
            <span v-if="details.status == 3">回收站</span>
            <span v-if="details.status == 4">类别禁用</span>
            <el-tag size="small">浏览量</el-tag> {{details.views}}
            <el-tag size="small">点赞量</el-tag> {{details.giveLike}}
        </div>
        <div class="content" v-html="details.hmContent"></div>
    </div>
</template>

<script>
    export default {
        name: "ArticleDetails",
        data(){
            return{
                details :{
                    id : -1,
                    title : '',
                    userBean : {
                        id : -1,
                        nickname : ''
                    },
                    author : {
                        id : -1,
                        nickname : ''
                    },
                    category : {
                        id : -1,
                        cname : ''
                    },
                    publishTime : '',
                    updateTime: '',
                    views: 0,
                    giveLike : 0,
                    hmContent : '',
                    status : -1
                }
            }
        },
        methods : {
            initDetails() {
                if (this.$route.query.id && this.$route.query.status) {
                    this.$getRequest('/article/getArticleDetailsById?id='+this.$route.query.id+'&status='+this.$route.query.status).then(resp => {
                        if (resp) {
                            this.details = resp;
                        }
                    })
                }
            }
        },
        mounted() {
            this.initDetails();
        }
    }
</script>

<style scoped>
    .header {
        text-align: center;
        color: #409eff;
    }
    .articleInfo{
        font-size: 14px;
        text-align: center;
        margin: 15px 0;
    }
    .articleInfo *{
        margin: 0 8px;
    }
    .content{
        width: 1000px;
        margin: 0 auto;
        box-sizing: border-box;
        padding:10px;
    }
</style>